window.onload=function(){
			function select_flag(){
		var links=document.querySelectorAll(".select_panel a");

		for(i=0;i<links.length;i++){
			links[i].addEventListener("click",function(e){
				var a= e.target;
				// 获取标签中的文本内容
				var txt=a.innerText;
				// 获取a标签的class类名
				var cls=a.className;

				// 获取+号在文本里面的位置

				// 截取字符串，获取“地区编码值”
				var phone = txt.substr(txt.indexOf("+"), txt.length-txt.indexOf("+"));

				// 设置输入框的地区编码值
				/*设置input的valur值*/
				document.getElementById('#phone').setAttribute('value',phone);

				// 设置input输入框的国旗标志
				/*切换国旗*/
				var div = document.querySelector('.flag');
				div.className="flag " +cls;
			})
		}
	};

	function switchFlag(){
		//  querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
		// 获取文档中 类名为"flag" 的元素
		var div = document.querySelector('.flag');
		console.log(div);
		// 获取文档中 类名为"select_panel" 的元素
		var panel = document.querySelector('.select_panel');
		console.log(panel);
		// addEventListener() 方法添加的事件句柄
		// 在属性div中添加点击事件。当用户在属性panel中任何地方点击时，在属性panel中的判断输出样式为不显示，则点击输出样式显示，反之点击输出样式为不显示。
		div.addEventListener('click',function(e){
			// 方法一：
			panel.style.display==='none'? panel.style.display='block': panel.style.display='none';
			// ? 判断条件。

			// 方法二：
			// if(panel.style.display==='none'){
			// 	panel.style.display='block';
			// }else{
			// 	panel.style.display='none';
			// }


		})
	};


	function switchTab(){
		var tabs = document.querySelectorAll('.regTabs ul li a');
		var ul = document.querySelector('.regTabs ul');

		var panels=document.querySelectorAll('.regForm');
		console.log(panels);

		var img=document.querySelector('.mainBody-side img');

		for (var i=0;i<tabs.length;i++){
			tabs[i].index=i;
			panels[i].index=i;
			tabs[i].addEventListener('click',function(e){
				var a=e.target;  
				// console.log(a.index);
				// 设置ul标签的背景图片位置
				ul.style.background='url(assets/imgans/tab.jpg) 0 -'+a.index*55+'px';


				for(var j=0;j<tabs.length;j++){
					console.log(' shezhi yanse');
					tabs[j].style.color='#000';
					panels[j].style.display='none';
				}

				a.style.color='#fff';
				panels[a.index].style.display='block';

				if(a.index==2){
					img.setAttribute('src','assets/imgans/reg_vip_163.gif');
				}else{
					img.setAttribute('src','assets/imgans/reg_master.gif');
				}
			})
			
		}
	};



	switchFlag();
	select_flag();
	switchTab();
}